<template>
  <div>
    <div class="select">
      <input type="file" id="filed" hidden="" @change="filePreview" />
      <p @click="selectImg()" class="avatar-uploader">
        <i v-if="textHide" class="el-icon-plus avatar-uploader-icon"></i>
        <img v-else :src="src" width="80" height="80" />
      </p>
    </div>

    <!-- <el-input
      placeholder="请输入账号密码"
      v-model="input"
      show-password
    ></el-input> -->
  </div>
</template>

<style lang="less" scoped>
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  // 悬浮样式设置
  &:hover {
    border-color: @blue-color;
  }
  &:hover .avatar-uploader-icon {
    color: @blue-color;
  }
}
</style>

<script>
export default {
  data() {
    return {
      src: "",
      textHide: true,
      input: "",
    };
  },
  methods: {
    selectImg: function () {
      document.getElementById("filed").click();
    },
    filePreview(e) {
      let _this = this;
      var files = e.target.files[0];
      const isJPG = files.type === "image/jpeg";
      const isPng = files.type === "image/png";
      if (!isJPG && !isPng) {
        this.$message.error("图片暂时只能支持jpg/png格式哦！");
        return;
      }
      if (!e || !window.FileReader) return; // 判断是否支持FileReader
      let reader = new FileReader();
      console.group("文件上传 =>");
      console.log("文件信息", files);
      reader.readAsDataURL(files); // 文件转换
      reader.onloadend = function () {
        _this.src = this.result;
        _this.textHide = false;
        console.log("src", _this.src);
        console.groupEnd();
      };
    },
  },
  created: function () {},
};
</script>

<style lang="less" scoped>
.select {
  // background-color: #363642;
}
</style>
